/**
 * 选项卡
 */
function scTabx(){
    var com = scCommon.instance();
    var crEle = com.crEle;
    var tab = null;

    var selectedName = null;

    /**
     * 创建视图
     * @param {*} opt
     */
    this.createView = function(opt){
        var menus = [...opt.menus];

        tab = crEle();
        var tabHead = crEle();
        var tabBody = crEle();

        tab.classList.add("sc-tabx");
        tabHead.classList.add("sc-tabx-head");
        tabBody.classList.add("sc-tabx-body");

        tab.appendChild(tabHead);
        tab.appendChild(tabBody);

        for(var i = 0; i < menus.length; i++){
            let menu = menus[i];
            let tabHeadItem = crEle();

            tabHeadItem.classList.add("sc-tabx-head-item");

            let label = crEle("span");
            label.innerText = menu.label;

            tabHeadItem.appendChild(label);
            tabHead.appendChild(tabHeadItem);

            let tabBodyItem = crEle();
            tabBodyItem.classList.add("sc-tabx-body-item");

            tabBody.appendChild(tabBodyItem);    
            
            if(menu.component){
                tabBodyItem.appendChild(menu.component.createView());
            }

            if(menu.selected){
                tabHeadItem.classList.add("selected");
                tabBodyItem.classList.add("selected");
            }

            menu.head = tabHeadItem;
            menu.body = tabBodyItem;
        }

        tabHead.addEventListener("mousedown", (e)=>{
            let isHeadItem = e.target.classList.contains("sc-tabx-head-item");
            let isParent = e.target.parentNode.classList.contains("sc-tabx-head-item");

            if(isHeadItem || isParent){
                let element = isParent ? e.target.parentNode : e.target;

                let headItem = tabHead.querySelector(".sc-tabx-head-item.selected");
                headItem.classList.remove("selected");

                let bodyItem = tabBody.querySelector(".sc-tabx-body-item.selected");
                bodyItem.classList.remove("selected");

                element.classList.add("selected");

                for(var i in menus){
                    if(menus[i].head === element){
                        menus[i].body.classList.add("selected");
                        selectedName = menus[i].label;
                        break;
                    }
                }

                e.stopPropagation();
            }
        });
        
        return tab;
    }

    /**
     * 获取当前选择选项卡名称
     * @returns 
     */
    this.getSelectedName = function(){
        return selectedName;
    }
}